<template>
	<view style="padding: 10px;box-sizing: border-box;">
		<u-cell title="头像">
			<template #righticon>
				<image class="cu-avatar lg" style="border-radius: 50%;" :src="user.avatarUrl" @click="uploadImage">
				</image>
			</template>
		</u-cell>
		<u-cell title="用户昵称">
			<template #righticon>
				<input style="text-align: right;" v-model="user.nickname" placeholder="请输入用户昵称" />
			</template>
		</u-cell>
		<u-cell title="性别">
			<template #righticon>
				<text @click="show = true" style="text-align: right;">{{user.sex == '1' ? '男' : '女'}}</text>
			</template>
		</u-cell>
		<u-cell title="电话">
			<template #righticon>
				<input style="text-align: right;" v-model="user.phone" placeholder="请输入用户电话" />
			</template>
		</u-cell>
		<u-cell title="邮箱">
			<template #righticon>
				<input style="text-align: right;" v-model="user.email" placeholder="请输入用户邮箱" />
			</template>
		</u-cell>
		<button class="radius u-m-t-10" type="primary" block @click="submit">保存</button>
		<u-picker :show="show" :columns="columns" :defaultIndex="defaultIndex" @confirm="confirmSex"
			@cancel="show = false"></u-picker>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		getToken
	} from '@/utils/auth';
	import config from '@/config.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	import {
		toast
	} from 'luoyu-uni-utils';
	import {
		updateUser
	} from '@/api/user';
	
	const userStore = useUserStore()
	//显示的用户数据
	const user = ref({...userStore.user})
	//显示性别框
	const show = ref(false)
	const defaultIndex = computed(() => {
		const sexs = columns.value[0]
		const index = sexs.findIndex((item) => item.value == user.sex) || 0
		return [index]
	})
	//性别框数据
	const columns = ref([
		[{
				text: '男',
				value: '1'
			},
			{
				text: '女',
				value: '2'
			}
		]
	])

	//选择性别
	const confirmSex = (e) => {
		user.value.sex = e.value[0].value
		show.value = false
	}
	//提交
	const submit = async () => {
		await updateUser(user.value)
		toast("更新成功")
		//更新成功在获取一次数据
		userStore.getUserInfo()
	}

	//上传头像
	const uploadImage = () => {
		uni.chooseImage({
			count: 1, //选择一张图片
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			success: function(res) {
				console.log(JSON.stringify(res.tempFilePaths));
				//获取第一张选中的图片地址
				const filePath = res.tempFilePaths[0]
				console.log(filePath, 'filePath');
				//获取token
				const token = getToken()
				//获取上传的根地址
				const baseUrl = config.baseUrl
				console.log(baseUrl + '/api/file/upload');
				//上传图片
				uni.uploadFile({
					url: baseUrl + '/api/file/upload',
					filePath: filePath, //选择上传图片的地址
					name: 'file',
					header: {
						Authorization: token //在请求头添加上传的token
					},
					success(res) {
						console.log(res);
						const response = JSON.parse(res.data || "{}")
						if (response.code == 200) {
							user.value.avatarUrl = response.data
						} else {
							toast("上传失败")
						}
					},
					fail(error) {
						console.log(error, 'error');
						toast("上传失败")
					}
				})

			}
		})
	}
</script>

<style scoped lang="scss">
</style>